<template>
  <div>
    <Card :bordered="false">
      <Form ref="form" :model="formData" :rules="ruleCustom" :label-width="80">
        <Row :gutter="50">
          <Col span="8">
            <FormItem label="文件名" prop="file">
              <label>
                <Input v-model="formData.file" placeholder="相对地址 如 Http/Controller/Api/SiteController.php"/>
              </label>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="50">
          <Col span="8">
            <FormItem label="项目" prop="project_id">
              <label>
                <Select clearable transfer filterable v-model="formData.project_id">
                  <Option v-for="item in projectData" :value="item.id" :key="item.name">{{ item.name }}</Option>
                </Select>
              </label>
            </FormItem>
          </Col>
        </Row>
        <Button
          type="primary"
          @click="handleSubmit('form')">查询文件MD5
        </Button>
      </Form>
    </Card>
  </div>
</template>

<script>
  import {allProject, checkMd5} from '@/api/project'

  export default {
    name: 'md5',
    mounted() {
      this.handleGetAllProject()
    },
    data() {
      return {
        formData: {},
        projectData: [],
        ruleCustom: {
          file: [
            {required: true, message: '请填写文件名称', trigger: 'blur'}
          ],
          project_id: [
            {required: true, message: '请选择项目', trigger: 'blur', type: 'number'},
          ],
        }
      }
    },
    methods: {
      handleGetAllProject: function () {
        allProject().then(res => {
          const _data = res.data
          this.projectData = _data.map(m => {
            return {
              id: m.id,
              name: m.name + '-' + m.env_name
            }
          })
        })
      },
      handleSubmit: function (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            checkMd5(this.formData).then(res => {
              this.$Notice.success({
                top: 500,
                title: '校验结果',
                desc: res.data,
                duration: 0
              })
            })
          } else {
            return false
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
